<template>
  <div class="follow-exclusive-settings">
    <template v-if="isMySelf">
      <div class="basic-tit">设置你的专属关注页</div>
      <div class="basic-desc">关注页的内容是基于你关注的用户、图集、单图和动效短视频来展示的。请根据你的喜好来设置专属你的关注内容吧！</div>
    </template>
    <template v-else>
      <a class="basic-tit other" :href="'/user/'+infoUser.id" target="_blank" style="margin-bottom:31px"><img loading="lazy" v-aimgd="{ avatar: infoUser.avatar, id: infoUser.id, w: 40, name: infoUser.userName }"> {{infoUser.userName}}的关注页</a>
    </template>
    <div class="op-row">
      <div class="num">{{ tabEnum[tab] }} <i>{{ total }}</i></div>
      <!-- <div class="num" v-if="tab == 2">关注图集数 <i>31</i></div>
        <div class="num" v-if="tab == 3">关注单图数 <i>31</i></div>
        <div class="num" v-if="tab == 4">关注短视频数 <i>31</i></div> -->
      <div class="main-tab">
        <a :class="{ cur: tab == 0 }" @click="chooseTab(0)">用户</a>
        <a :class="{ cur: tab == 3 }" @click="chooseTab(3)">收藏夹</a>
        <!-- <a :class="{ cur: tab == 2 }" @click="chooseTab(2)">单图</a>
            <a :class="{ cur: tab == 4 }" @click="chooseTab(4)">短视频</a> -->
      </div>
      <div class="mk-cus-ddl" v-if="tab === 4">
        <span class="cur">最新关注</span>
        <div class="sub-dd-block">
          <ul class="sub-ddls">
            <li><a>全部</a></li>
            <li><a>点赞最多</a></li>
            <li><a>评论最多</a></li>
            <li><a>最新关注</a></li>
          </ul>
        </div>
      </div>
      <div class="layout-model" v-else>
        <a class="column" :class="{ active: layoutModel == 1 }" @click="layoutModel = 1"></a>
        <a class="list" :class="{ active: layoutModel == 2 }" @click="layoutModel = 2"></a>
      </div>
    </div>

    <template v-if="list.length > 0">
      <!-- 用户 -->
      <template v-if="tab === 0">
        <div class="users" v-if="layoutModel == 1">
          <div class="user-item" :class="{'no-data':!item.blogger}" v-for="(item, i) in list" :key="i">
            <template v-if="item.blogger">
              <a class="img-box" :href="'/user/' + item.blogger.id" target="_blank">
                <img loading="lazy" :srcsets="item.srcsets" v-lazy="item.lazy" />
              </a>
              <a class="name" :href="'/user/' + item.blogger.id" target="_blank">{{ item.blogger.userName }}</a>
              <div class="nums">
                <span>{{item.blogger.fansStr}} 粉丝</span>
                <span>{{ item.blogger.seeStr }} 人气</span>
              </div>
              <div class="addr" v-if="item.blogger.province">{{ item.blogger.province }} | {{ item.blogger.city }}</div>
              <div class="addr" v-else></div>
              <div class="stip">{{item.blogger.updateTimeStr?item.blogger.updateTimeStr+' 新增了发布':''}}</div>
              <a class="follow-btn" :class="[item.isSubscribe == 1 ? 'active' : '']"
                @click="handleFollow(item)">{{ item.isSubscribe == 1 ? '已关注' : '关注' }}</a>
            </template>
          </div>
        </div>
        <div class="fans-datas" v-if="layoutModel == 2">
          <div class="fans-item"  :class="{'no-data':!item.blogger}" v-for="(item, i) in list" :key="i">
            <template v-if="item.blogger">
              <div class="ldata">
                <a class="img-box" :href="'/user/' + item.blogger.id" target="_blank">
                  <img loading="lazy" :srcsets="item.srcsets" v-lazy="item.lazy" />
                </a>
                <div class="basic">
                  <div class="zwtop">
                    <a class="name" :href="'/user/' + item.blogger.id" target="_blank">{{ item.blogger.userName }}</a>
                    <div class="num-b">
                      <span><b>{{item.blogger.fansStr}}</b>粉丝</span>
                      <span><b>{{ item.blogger.seeStr }}</b>人气</span>
                    </div>
                    <div class="desc" v-if="item.blogger.province">{{ item.blogger.province }}｜{{ item.blogger.city }}{{ item.blogger.subhead?'｜'+item.blogger.subhead:''}}
                    </div>
                    <div class="time-desc"  v-if="item.blogger.updateTimeStr">{{item.blogger.updateTimeStr}} 新增了发布</div>
                  </div>
                  <a class="follow-btn" :class="[item.isSubscribe == 1 ? 'active' : '']"
                    @click="handleFollow(item)">{{ item.isSubscribe == 1 ? '已关注' : '关注' }}</a>
                </div>
              </div>
              <div class="rdata">
                <div class="works">
                  <a v-for="(sub, sdx) in item.follower.articles" :key="sdx"><img loading="lazy" :src="sub.image" alt=""></a>
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>

      <!-- 图集 -->
      <template v-if="tab === 3">
        <ul class="atlas-layout-column" v-if="layoutModel == 1">
          <a class="fav-d-item" :class="{'no-data':!f.memberExplorer}" v-for="(f, i) in list" :key="i"  :href="f.memberExplorer?nextPageEnum[f.memberExplorer.type] + '/' + f.memberExplorer.id:'#'" @click.prevent="()=>{return false;}">
            <template v-if="f.memberExplorer">
              <div class="top-b" @click.prevent="toFoldInfo(f.memberExplorer)">
                <div class="img-flex-box">
                  <div class="lt-img">
                    <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 0" :srcset="f.memberExplorer.collectList[0].srcsets" v-lazy="f.memberExplorer.collectList[0].lazy" @error="loadError"/>
                  </div>
                  <div class="rt-img">
                    <div class="next-img">
                      <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 1" :srcset="f.memberExplorer.collectList[1].srcsets" v-lazy="f.memberExplorer.collectList[1].lazy" @error="loadError" />
                    </div>
                    <div class="last-img">
                      <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 2" :srcset="f.memberExplorer.collectList[2].srcsets" v-lazy="f.memberExplorer.collectList[2].lazy" @error="loadError"/>
                    </div>
                  </div>
                </div>
                <div class="bot-desc">
                  <span class="file-name" :title="f.memberExplorer.title">{{ f.memberExplorer.title }}</span>
                  <span class="file-num">{{ f.memberExplorer.num }} 收藏</span>
                </div>
                <div class="typename-box">
                  <span class="type-name"  :class="['ftp_'+f.memberExplorer.type]">{{ folderTypeEnum[f.memberExplorer.type] }}</span>
                </div>
              </div>
              <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.prevent="handleFollowFolder(f,true)">{{
                f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
            </template>
          </a>
        </ul>
        <div class="atlas-list" v-if="layoutModel == 2">
          <a class="atla-item" :class="{'no-data':!f.memberExplorer}" v-for="(f, i) in list" :key="i" :href="f.memberExplorer?nextPageEnum[f.memberExplorer.type] + '/' + f.memberExplorer.id:'#'"  @click.prevent="toFoldInfo(f.memberExplorer)">
            <template v-if="f.memberExplorer">
              <div class="img-box" :class="{'no-data':!f.memberExplorer.collectList}">
                <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 0" :srcset="f.memberExplorer.collectList[0].srcsets" v-lazy="f.memberExplorer.collectList[0].lazy" @error="loadError"/>
              </div>
              <div class="basic">
                <div class="title" :title="f.memberExplorer.title">{{ f.memberExplorer.title }}</div>
                <span class="type-name"  :class="['ftp_'+f.memberExplorer.type]">{{ folderTypeEnum[f.memberExplorer.type] }}</span>
                <div class="follow-num">{{f.memberExplorer.num}} 收藏</div>
                <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.stop="handleFollowFolder(f,true)">{{
                f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
              </div>
            </template>
          </a>
        </div>
      </template>
      <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div>

      <template v-if="tab === 2">
        <WaterfallFlowImgList id="1" :columns="7" :list="list"/>
      </template>

      <template v-if="tab === 4">
        <ul class="video-layout-column">
          <li class="video-d-item">
            <div class="video-box">
              <img loading="lazy" src="https://img.gameui.net/article-5066-1663154901000@1x456.webp" />
              <span class="play-icon"></span>
            </div>
            <a class="follow-btn active">已关注</a>
          </li>
          <li class="video-d-item">
            <div class="video-box">
              <img loading="lazy" src="https://img.gameui.net/article-5066-1663154901000@1x456.webp" />
              <span class="play-icon"></span>
            </div>
            <a class="follow-to">关注</a>
          </li>
          <li class="video-d-item" v-for="i in 28" :key="i">
            <div class="video-box">
              <img loading="lazy" src="https://img.gameui.net/article-5066-1663154901000@1x456.webp" />
              <span class="play-icon"></span>
            </div>
            <a class="follow-btn active">已关注</a>
          </li>
        </ul>
      </template>
    </template>

    <template v-else-if="list.length == 0 && isloaded">
      <div class="empty-follow-data">
        <div class="text">还没有关注的{{tab==0?'用户':'图片集'}}，看看“为你推荐”吧～</div>
      </div>
    </template>
    <div class="sub-tj-row" v-if="!hasMore">为你推荐</div>
    <!-- 用户 -->
    <template v-if="tab === 0">
      <div class="users" v-if="layoutModel == 1">
        <div class="user-item" :class="{'no-data':!item.id}" v-for="(item, i) in recommends" :key="i">
          <template v-if="item.id">
            <a class="img-box" :href="'/user/' + item.id" target="_blank">
              <img loading="lazy" :srcsets="item.srcsets" v-lazy="item.lazy"/>
            </a>
            <a class="name" :href="'/user/' + item.id" target="_blank">{{ item.userName }}</a>
            <div class="nums">
              <span>{{item.fansStr}} 粉丝</span>
              <span>{{ item.seeStr }} 人气</span>
            </div>
            <div class="addr" v-if="item.province">{{ item.province }} | {{ item.city }}</div>
            <div class="addr" v-else></div>
            <div class="stip" v-if="item.updateTimeStr">{{item.updateTimeStr}} 新增了发布</div>
            <a class="follow-btn" :class="[item.isSubscribe == 1 ? 'active' : '']"
              @click="handleFollowByTj(item)">{{ item.isSubscribe == 1 ? '已关注' : '关注' }}</a>
          </template>
        </div>
      </div>
      <div class="fans-datas" v-if="layoutModel == 2">
        <div class="fans-item" :class="{'no-data':!item.id}" v-for="(item, i) in recommends" :key="i">
          <template v-if="item.id">
            <div class="ldata">
              <a class="img-box" :href="'/user/' + item.id" target="_blank">
                <img loading="lazy" :srcsets="item.srcsets" v-lazy="item.lazy"/>
              </a>
              <div class="basic">
                <div class="zwtop">
                  <a class="name" :href="'/user/' + item.id" target="_blank">{{ item.userName }}</a>
                  <div class="num-b">
                    <span><b>{{item.fansStr}}</b>粉丝</span>
                    <span><b>{{ item.seeStr }}</b>人气</span>
                  </div>
                  <div class="desc" v-if="item.province">{{ item.province }}｜{{ item.city }}{{ item.subhead?'｜'+item.subhead:''}}
                  </div>
                  <div class="time-desc" v-if="item.updateTimeStr">{{item.updateTimeStr}} 新增了发布</div>
                </div>
                <a class="follow-btn" :class="[item.isSubscribe == 1 ? 'active' : '']"
                  @click="handleFollowByTj(item)">{{ item.isSubscribe == 1 ? '已关注' : '关注' }}</a>
              </div>
            </div>
            <div class="rdata">
              <div class="works">
                <a><img loading="lazy" v-for="(item, idx) in item.articles" :key="idx" :src="item.image" alt=""></a>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <!-- 图集 -->
    <template v-if="tab === 3">
      <ul class="atlas-layout-column" v-if="layoutModel == 1">
        <a class="fav-d-item" :class="{'no-data':!f.id}" v-for="(f, i) in recommends" :href="f.id?nextPageEnum[f.type] + '/' + f.id:'#'" :key="i" @click.prevent="()=>{return false;}">
          <template v-if="f.id">
            <div class="top-b" @click.prevent="toFoldInfo(f)">
              <div class="img-flex-box">
                <div class="lt-img">
                  <img loading="lazy" v-if="f.collectList && f.collectList.length > 0"  :srcset="f.collectList[0].srcsets" v-lazy="f.collectList[0].lazy"  @error="loadError"/>
                </div>
                <div class="rt-img">
                  <div class="next-img">
                    <img loading="lazy" v-if="f.collectList && f.collectList.length > 1"  :srcset="f.collectList[1].srcsets" v-lazy="f.collectList[1].lazy"  @error="loadError"/>
                  </div>
                  <div class="last-img">
                    <img loading="lazy" v-if="f.collectList && f.collectList.length > 2"  :srcset="f.collectList[2].srcsets" v-lazy="f.collectList[2].lazy"  @error="loadError"/>
                  </div>
                </div>
              </div>
              <div class="bot-desc">
                <span class="file-name" :title="f.title">{{ f.title }}</span>
                <span class="file-num">{{ f.num }} 收藏</span>
              </div>
              <div class="typename-box">
                <span class="type-name"  :class="['ftp_'+f.type]">{{ folderTypeEnum[f.type] }}</span>
              </div>
            </div>
            <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.prevent="handleFollowFolder(f,false)">{{
              f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
          </template>
        </a>
      </ul>
      <div class="atlas-list" v-if="layoutModel == 2">
        <a class="atla-item" :class="{'no-data':!f.id}" v-for="(f, i) in recommends" :key="i" :href="f.id?nextPageEnum[f.type] + '/' + f.id:'#'" @click.prevent="()=>{return false;}">
          <template v-if="f.id">
            <div class="img-box" :class="{'no-data':!f.collectList}" @click.prevent="toFoldInfo(f)">
              <img loading="lazy" v-if="f.collectList && f.collectList.length > 0" :srcset="f.collectList[0].srcsets" v-lazy="f.collectList[0].lazy" @error="loadError"/>
            </div>
            <div class="basic">
              <div class="title" :title="f.title">{{ f.title }}</div>
              <span class="type-name"  :class="['ftp_'+f.type]">{{ folderTypeEnum[f.type] }}</span>
              <div class="follow-num">{{f.num}} 收藏</div>
              <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.prevent="handleFollowFolder(f,false)">{{
              f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
            </div>
          </template>
        </a>
      </div>
    </template>
    <div class="no-more-text" v-if="!recommendhasMore&&!isloadingrecommend&&recommends.length>0">没有更多了</div>
  </div>
</template>

<script>
import qs from 'qs'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
import api from '@/api/api'
export default {
  components: {
    WaterfallFlowImgList
  },
  data() {
    return {
      infoUser:{},
      isMySelf:false,
      scrollPosition:0,
      loginUid:'',
      isloading:true,
      recommends:[],
      recommendhasMore:true,
      isloadingrecommend:true,
      folderTypeEnum: {
        1: '图片集收藏夹',
        0: '单图收藏夹',
        2: '短视频收藏夹',
        3: '未知类型收藏夹'
      },
      nextPageEnum: {
        '': '/',
        1: '/collection/games',
        0: '/collection/imgs',
        2: '/collection/videos'
      },
      tabEnum: {
        0: '关注用户数',
        2: '关注图集数',
        3: '关注图集数',
        4: '关注短视频数'
      },
      defaultAvatar: require('../../assets/pro/default_uimg.svg'),
      tab: 0,
      isloaded: false,
      total: 0,
      list: [],
      collectIds: [],
      scrollLoaded: false,
      scrollRecommendLoaded: false,
      layoutModel: 1,
      hasMore: true,
      params: {
        pageNum: 1, pageSize: 15, type: 0, currentUserId: '', isAsc: 'desc', orderByColumn: 'createTime'
      },
      recommendUserParam:{
        list:[],
        params:{
          isAsc:'desc',
          orderByColumn:'see',
          pageNum:1,
          pageSize:10
        }
      },
      recommendFolderParam:{
        list:[],
        params:{
          isAsc:'desc',
          orderByColumn:'fans',
          pageNum:1,
          pageSize:10
        }
      }
    }
  },
  methods: {
    toUserCenter(id) {
      this.$router.push({ path: '/user/' + id })
    },
    loadError(e){
        e.target.removeAttribute('srcset');
    },
    toFoldInfo(f) {
      if(!f.id)return;
      localStorage.setItem('FOL-BACK-P',this.$router.currentRoute.fullPath);
      this.$router.push({ path: this.nextPageEnum[f.type] + '/' + f.id })
      // let routeData = this.$router.resolve({ path: this.nextPageEnum[f.type] + '/' + f.id });

      // window.open(routeData.href, '_blank');
    },
      onLoaded(e,item,w,isimg){
          let domainUrl=this.$imgdomainurl;
          let el=e.target;
          let _vtime=null;
          if(item.updateTime){
              _vtime=item.updateTime;
          }else if(item.createTime){
              _vtime=item.createTime;
          }else if(item.create_time){
              _vtime=item.create_time.replace('T',' ');
          }
          _vtime=Math.abs(new Date(_vtime).getTime());
          let srcsets=[];
          
          if(isimg){
              let _pre=item.imageId?item.imageId:item.article?'article-'+item.article.id:'';
              srcsets.push(domainUrl+_pre+'-'+_vtime+'@1x'+w+'.webp 1x');
              srcsets.push(domainUrl+_pre+'-'+_vtime+'@2x'+w+'.webp 2x');
              srcsets.push(domainUrl+_pre+'-'+_vtime+'@3x'+w+'.webp 3x');
              el.srcset=srcsets.join(',')
          }else{
              srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x'+w+'.webp 1x');
              srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x'+w+'.webp 2x');
              srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x'+w+'.webp 3x');
              el.srcset=srcsets.join(',')
          }
      },
      getimgObj(item,w,isimg){
        let _vtime=null;
        if(item.updateTime){
          _vtime=item.updateTime;
        }else if(item.createTime){
          _vtime=item.createTime;
        }else if(item.create_time){
          _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        if(isimg){
          if(!item){
              return{
                  src:require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                  error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                  loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
              }
          }else{
              return{
                  src:this.$imgdomainurl+(item.imageId?item.imageId:item.article?'article-'+item.article.id:'')+'-'+_vtime+'@1x'+w+'.webp',
                  error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                  loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
              }
          }
        }else{
          return{
              src:this.$imgdomainurl+item.id+'-'+_vtime+'@1x'+w+'.webp',
              error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
          }
        }
      },
    async handleFollowFolder(item,isLevelTwo) {
      if(isLevelTwo){
        if (item.isSubscribe == 0) {
          let res = await api.followFolder({ explorerId: item.memberExplorer.id });
          // let res = await api.followFolder(item.id);
          if (res.code == 0) {
            item.isSubscribe = 1;
            this.$amessage.success('关注+1，灵感不断！');
          }
        } else {
          let res = await api.cancelFollowFolder({ explorerId: item.memberExplorer.id });
          // let res = await api.cancelFollowFolder(item.id);
          if (res.code == 0) {
            item.isSubscribe = 0;
            this.$amessage.success('取关成功');
          } 
        }
      }
      else{
        if (item.isSubscribe == 0) {
          let res = await api.followFolder({ explorerId: item.id });
          // let res = await api.followFolder(item.id);
          if (res.code == 0) {
            item.isSubscribe = 1;
            this.$amessage.success('关注+1，灵感不断！');
          }
        } else {
          let res = await api.cancelFollowFolder({ explorerId: item.id });
          // let res = await api.cancelFollowFolder(item.id);
          if (res.code == 0) {
            item.isSubscribe = 0;
            this.$amessage.success('取关成功');
          } 
        }
      }

    },
    chooseTab(_type) {
      if (this.tab == _type) return;
      this.tab = _type;
      this.total=0;

      let urlParams={t:this.tab};
      if(this.loginUid!=this.params.currentUserId){
        urlParams.u=this.params.currentUserId;
      }
      window.history.pushState({}, 0, '/exclusiveSetting?' + qs.stringify(urlParams))

      this.scrollLoaded = false;
      this.list = [];
      this.hasMore = true;
      this.params.pageNum = 1;
      this.queryList();

      this.recommendhasMore=true;
      this.recommendUserParam.params.pageNum=1;
      this.recommendFolderParam.params.pageNum=1;
      this.recommends=[];
      // this.queryRecommends();
    },
    handleLoadingMore() {
      this.params.pageNum++;
      this.queryList()
    },
    handleLoadingMoreRecommend() {
      if(this.tab==0){
        this.recommendUserParam.params.pageNum++;
      }else{
        this.recommendFolderParam.params.pageNum++;
      }
      this.queryRecommends()
    },
    async handleFollow(item) {
      if (item.isSubscribe > 0) {
        let res = await api.cancelFollowTo(item.blogger.id);
        if (res.code == 0) {
          item.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(item.blogger.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          item.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    async handleFollowByTj(item) {
      if (item.isSubscribe > 0) {
        let res = await api.cancelFollowTo(item.id);
        if (res.code == 0) {
          item.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(item.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          item.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
    async queryRecommends(){
      
      let domainUrl = this.$imgdomainurl;
      let that = this;
      let res = {};
      this.isloadingrecommend = true;
      // const loading = this.$loading({
      //     lock: true,
      //     text: '努力加载中...',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      // });
      if (this.tab == 0) {
        let _params=Object.assign({},this.recommendUserParam.params);
        if(_params.pageNum==1){
          this.recommends=[{},{},{},{},{},{},{},{},{},{},{},{}]
        }
        res = await api.getRecommendUsers(_params);
        if(_params.pageNum==1){
          this.recommends=[]
        }
        res.data.map(item=>{
            let _vtime=null;
            if(item.updateTime){
                _vtime=item.updateTime;
            }else if(item.createTime){
                _vtime=item.createTime;
            }else if(item.create_time){
                _vtime=item.create_time.replace('T',' ');
            }
            _vtime=Math.abs(new Date(_vtime).getTime());
            item.lazy = {
                src:that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x200.webp',
                error: require('@/assets/pro/default_sys_img.svg'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
            let srcsets=[];
            srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x200.webp 1x');
            srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@2x200.webp 2x');
            srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@3x200.webp 3x');
            item.srcsets=srcsets.join(',')
        })
        this.recommends = [...this.recommends, ...res.data];
        this.recommendUserParam.total = res.total;

        let totalPage = res.total % _params.pageSize == 0 ? res.total / _params.pageSize : parseInt(res.total / _params.pageSize) + 1
        if (res.data && (res.data.length <_params.pageSize ||_params.pageNum >= totalPage)) {
          that.recommendhasMore = false
        } else {
          that.recommendhasMore = true
        }
      }
      else if (this.tab == 3) {
        let _params=Object.assign({},this.recommendFolderParam.params);
        if(_params.pageNum==1){
          this.recommends=[{},{},{},{},{},{},{},{},{},{},{},{}]
        }
        if(this.layoutModel==2){
          _params.pageSize=30;
        }
        res = await api.getRecommendFolders(_params);
        if(_params.pageNum==1){
          this.recommends=[]
        }
        res.data.map(item=>{
          if(item.collectList)
          {
            item.collectList.map(f=>{
              let _vtime = null;
              if (f.updateTime) {
                  _vtime = f.updateTime;
              } else if (f.createTime) {
                  _vtime = f.createTime;
              } else if (f.create_time) {
                  _vtime = f.create_time.replace('T', ' ');
              }
              _vtime = Math.abs(new Date(_vtime).getTime());
              let srcsets = [];
              let pref=item.type==1?'article-'+f.article.id:f.imageId;
              srcsets.push(domainUrl +pref + '-' + _vtime + '@1x432.webp 1x');
              srcsets.push(domainUrl +pref + '-' + _vtime + '@2x432.webp 2x');
              srcsets.push(domainUrl +pref + '-' + _vtime + '@3x432.webp 3x');
              f.srcsets = srcsets.join(',')
              f.lazy = {
                  src: domainUrl +pref + '-' + _vtime + '@1x432.webp',
                  error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                  loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
              }
            })
          }
        })
        this.recommends = [...this.recommends, ...res.data];
        
        let totalPage = res.total % _params.pageSize == 0 ? res.total / _params.pageSize : parseInt(res.total / _params.pageSize) + 1
        if (res.data && (res.data.length <_params.pageSize ||_params.pageNum >= totalPage)) {
          that.recommendhasMore = false
        } else {
          that.recommendhasMore = true
        }
      }
      setTimeout(()=>{
        that.isloadingrecommend = false;
      },1000)
      // loading.close();
      
      this.scrollRecommendLoaded = true;
      this.isloaded = true;
    },
    async queryList() {
      let domainUrl=this.$imgdomainurl;
      let that = this;
      let res = {};
      this.isloaded = false;
      this.isloading=true;
      // const loading = this.$loading({
      //     lock: true,
      //     text: '努力加载中...',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      // });
      let params=Object.assign({},this.params);
      if(params.pageNum==1){
        this.list=[{},{},{},{},{},{},{},{},{},{}];
      }
      if (this.tab == 0) {
        params.type=0;
        res = await api.myAttentions(params);
        res.data.map(u=>{
            let item=u.blogger;
            let _vtime=null;
            if(item.updateTime){
                _vtime=item.updateTime;
            }else if(item.createTime){
                _vtime=item.createTime;
            }else if(item.create_time){
                _vtime=item.create_time.replace('T',' ');
            }
            _vtime=Math.abs(new Date(_vtime).getTime());
            u.lazy = {
                src:domainUrl+'avatar-'+item.id+'-'+_vtime+'@1x200.webp',
                error: require('@/assets/pro/default_sys_img.svg'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
            let srcsets=[];
            srcsets.push(domainUrl+'avatar-'+item.id+'-'+_vtime+'@1x200.webp 1x');
            srcsets.push(domainUrl+'avatar-'+item.id+'-'+_vtime+'@2x200.webp 2x');
            srcsets.push(domainUrl+'avatar-'+item.id+'-'+_vtime+'@3x200.webp 3x');
            u.srcsets=srcsets.join(',')
        })
      }
      else if (this.tab == 3) {
        // let data = Object.assign({}, this.params);
        params.isBlogger = 0;
        params.isAsc = 'desc';
        params.orderByColumn = 'createTime';
        params.type=3;
        if(this.layoutModel==2){
          params.pageSize=30;
        }
        res = await api.myAttentions(params);
        res.data.map(item=>{
          if(item.memberExplorer.collectList)
          {
            item.memberExplorer.collectList.map(f=>{
                let _vtime = null;
                if (f.updateTime) {
                    _vtime = f.updateTime;
                } else if (f.createTime) {
                    _vtime = f.createTime;
                } else if (f.create_time) {
                    _vtime = f.create_time.replace('T', ' ');
                }
                _vtime = Math.abs(new Date(_vtime).getTime());
                let srcsets = [];
                let pref=item.memberExplorer.type==1?'article-'+f.article.id:f.imageId;
                srcsets.push(domainUrl +pref + '-' + _vtime + '@1x408.webp 1x');
                srcsets.push(domainUrl + pref + '-' + _vtime + '@2x408.webp 2x');
                srcsets.push(domainUrl + pref + '-' + _vtime + '@3x408.webp 3x');
                f.srcsets = srcsets.join(',')
                f.lazy = {
                    src: domainUrl + pref + '-' + _vtime + '@1x432.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            })
          }
        })
      }
      else if (this.tab == 2) {
        let data = Object.assign({}, this.params);
        data.isBlogger = 0;
        data.isAsc = 'desc';
        data.orderByColumn = 'createTime';
        res = await api.getUserImgs(data);
        res.data.map(item => {
          if (item.thumbnailBean && !item.thumbnailBean.id) {
            item.thumbnailBean.id = item.id;
          }
          if (that.collectIds.includes(item.id)) {
            item.isfaved = true
          } else {
            item.isfaved = false
          }
          item.selected = false

          item.ratios = []

          item.width = parseInt(item.thumbnailBean.imageWidth)
          item.height = parseInt(item.thumbnailBean.imageHeight)

          if (item.tags) {
            item.tags = item.tags.split(',')
          } else {
            item.tags = []
          }
          item.src = item.thumbnailBean.bigThumbnail
          let _vtime=null;
          if(item.updateTime){
            _vtime=item.updateTime;
          }else if(item.createTime){
            _vtime=item.createTime;
          }else if(item.create_time){
            _vtime=item.create_time.replace('T',' ');
          }
          _vtime=Math.abs(new Date(_vtime).getTime());
          item.lazy = {
            src:that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp',
            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
          }
          let srcsets=[];
          srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp 1x');
          srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@2x560.webp 2x');
          srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@3x560.webp 3x');
          item.srcsets=srcsets.join(',')

          if ((item.width == 1920 && item.height == 1920) || (item.width == 418 && item.height == 418)) {
            item.w = item.width;
            item.h = item.height;

            item.sw = item.w;
            item.sh = item.h;
          } else {
            item.w = item.thumbnailBean.imageWidth;
            item.h = item.thumbnailBean.imageHeight;

            item.sw = item.w;
            item.sh = item.h;
          }
        })
      }
      else if (this.tab == 4) {
        let data = Object.assign({}, this.params);
        data.isBlogger = 0;
        data.isAsc = 'desc';
        data.orderByColumn = 'createTime';
        res = await api.shortVideoList(data)
      }
      if(params.pageNum==1){
        this.list=[];
      }
      this.isloading=false;
      // loading.close();
      this.list = [...this.list, ...res.data];
      this.total = res.total;
      this.scrollLoaded = true;
      let totalPage = res.total % params.pageSize == 0 ? res.total / params.pageSize : parseInt(res.total / params.pageSize) + 1
      if (res.data && (res.data.length < params.pageSize || params.pageNum >= totalPage)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }

      this.isloaded = true;

      if(!that.hasMore){
        if(that.tab==0){
            if(that.recommendUserParam.params.pageNum==1){
              that.queryRecommends();
              that.recommendUserParam.params.pageNum++;
            }
        }else if(that.tab==3){
          if(that.recommendFolderParam.params.pageNum==1){
            that.queryRecommends();
            that.recommendFolderParam.params.pageNum++;
          }
        }
      }
    },
    docScroll(e){
      this.scrollPosition=e.currentTarget.scrollY;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

      if (this.scrollLoaded)
      {
        if (jHeight <= 50 && this.hasMore) {
          this.scrollLoaded = false
          this.handleLoadingMore()
        }
      }
      if(this.scrollRecommendLoaded){
        if (jHeight <= 50 && this.recommendhasMore&&!this.hasMore) {
          this.scrollRecommendLoaded = false
          this.handleLoadingMoreRecommend();
        }
      }
    }
  },
  destroyed() {
      window.removeEventListener('scroll', this.docScroll);
  },
  activated(){
      window.addEventListener('scroll', this.docScroll);
      let that=this;
      this.$nextTick(() => {
          window.scrollTo(0,that.scrollPosition)
      });
  },
  deactivated(){
      window.removeEventListener('scroll', this.docScroll);
  },
  async mounted() {
    this.loginUid=localStorage.getItem('userId');
    let routeQuery = this.$route.query;
    if (routeQuery.t) {
      this.tab = parseInt(routeQuery.t);
    }
    if(routeQuery.u){
      this.isMySelf=false;
      this.params.currentUserId = routeQuery.u;
      let res = await api.getMemberInfo({ id: routeQuery.u });
      this.infoUser=res.data;
    }else{
      this.isMySelf=true;
      this.params.currentUserId = localStorage.getItem('userId');
    }
    this.queryList();
  }
}
</script>

<style lang="less">
.sub-tj-row {
  font-size: 26px;
  color: #fff;
  margin-bottom: 15px;
  margin-top: 74px;
  line-height: 37px;
}

.follow-exclusive-settings {
  .waf-ligan-item {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 1.2em;
    border: 2px solid #000;
    border-radius: 16px;
    transition: 0.1s all linear;
    overflow: hidden;

    &:hover {
      cursor: pointer;
      border: 2px solid #11CCB1;

      .hid-btn {
        display: inherit;
      }
    }

    .m-img {
      border-radius: 16px;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    .author {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 10px 13px;
      width: 164px;
      cursor: pointer;

      .ar-tit {
        font-size: 14px;
        font-weight: 500;
        color: #383737;
        line-height: 20px;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
        background-position: left center;
        padding-left: 22px;
      }

      .u-box {
        display: flex;
        padding-left: 20px;

        .name {
          font-size: 14px;
          color: #969696;
          font-weight: 500;
        }

        .avatar {
          width: 20px;
          height: 20px;
          border-radius: 20px;
          margin-right: 7px;
        }
      }
    }

    .like-icon-btn {}

    .fav-btn {
      background-color: #11CCB1;
      color: #fff;
      height: 44px;
      line-height: 44px;
      // width:82px;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      border-radius: 12px;
      cursor: pointer;
      background-image: url('../../assets/pro/un_favicon.svg');
      background-repeat: no-repeat;
      background-position: 11px center;
      padding-left: 35px;
      padding-right: 12px;

      &:hover {
        background-color: #f34972;
      }
    }

    .select-btn {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 10px;
      top: 10px;
      background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
      background-size: cover;

      &.active {
        background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
        background-size: cover;
      }
    }

    .faved-btn {
      background-color: #fff;
      color: #000;
      height: 44px;
      line-height: 44px;
      // width:82px;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      border-radius: 12px;
      cursor: pointer;
      background-image: url('../../assets/pro/faved_icon.svg');
      background-repeat: no-repeat;
      background-position: 11px center;
      padding-left: 35px;
      padding-right: 12px;
      opacity: 0.9;

      &:hover {
        opacity: 1;
      }
    }

    .xs-img-btn {
      background-image: url('../../assets/pro/xs_img_cion.svg');
      background-repeat: no-repeat;
      background-position: center center;
      width: 34px;
      height: 34px;
      position: absolute;
      right: 3px;
      bottom: 14px;
      background-color: #fff;
      border-radius: 12px;
      cursor: pointer;
      opacity: 0.9;

      &:hover {
        opacity: 1;
      }
    }

    .hid-el {
      // display: none;
      transition: .1s all linear;
      opacity: 0;
    }

    &:hover {
      border: 2px solid #11CCB1;

      .hid-el {
        // display: inline-block;
        opacity: 1;

      }
    }

    &.active {
      border: 2px solid #11CCB1;

      .select-btn {
        // display: inline-block;
        opacity: 1;
      }
    }
  }

  .empty-follow-data {
    background: url('../../assets/pro/empty_follow_data.svg') no-repeat;
    background-size: 100px 101.31px;
    background-position: center 83px;
    height: 300px;
    position: relative;

    .text {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 212px;
      text-align: center;
      font-size: 16px;
      color: #fff;
    }
  }

  .atlas-list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .atla-item {
      // margin-right: 20px;
      // margin-bottom: 20px;
      display: flex;
      align-items: center;
      width: calc((100% - 80px) / 5);
      height: 160px;
      background: #171717;
      border-radius: 16px;
      transition: .1s all linear;
      border: 2px solid transparent;
      overflow: hidden;

      animation: opacity .2s linear;

      &:hover {
        border-color:#11CCB1;
      }

      &:nth-child(5n) {
        // margin-right: 0px;
      }

      .img-box {
        // width: 140px;
        min-width: 160px;
        max-width: 160px;
        height: 160px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 20px;
        position: relative;
        &.no-data{
          background:#242327;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .basic {
        width: calc((100% - 180px));
        .type-name {
        line-height: 20px;
        font-size: 10px;
        padding: 0px 4px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        &:before {
            content: '';
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            height: 100%;
        }
        
        &.ftp_1 {
            color: #725959;

              &:before {
                  background: rgba(228, 36, 82, .14);
              }
          }

          &.ftp_0 {
              color: #726659;

              &:before {
                  background: rgba(#E49424, .14);
              }
          }

          &.ftp_2 {
              color: #4A5A4B;
              &:before {
                  opacity: 0.14;
                  background: rgba(54, 228, 36, 0.54);
              }
          }
        i {
          font-style: normal;
          position: relative;
          font-size: 10px;
          width: 100%;
          text-align: center;
        }
      }

        .title {
          font-size: 16px;
          line-height: 22px;
          font-weight: 500;
          color: #fff;
          white-space: nowrap;
          overflow: hidden;
          width: 99%;
          text-overflow: ellipsis;
        }

        .follow-num {
          color: #969696;
          font-size: 14px;
          line-height: 20px;
          margin: 0px 0px 10px 0px;
        }

        .followed-btn {
          background: #29272f;
          color: #fff;
          width: 90px;
          line-height: 44px;
          border-radius: 8px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
          user-select: none;
        }

        .follow-btn {
          background: #11CCB1;
          color: #fff;
          width: 87px;
          line-height: 36px;
          border-radius: 8px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
          user-select: none;
          transition: .2s all linear;

          &:hover {
            background:#ab2646;
          }

          &.active {
            background: #29272f;
            &:hover{
              background:#232129;
            }
          }
        }
      }
    }
  }

  .atlas-layout-column {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .fav-d-item {
      // width: 312px;
      width: calc((100% - 80px) / 5);
      // height: 368px;
      // margin-right: 20px;
      // margin-bottom: 20px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      user-select: none;
      border-color: #171717;
      animation: opacity .2s linear;
      &.no-data{
        min-height:368px;
        min-width: calc((100% - 80px) / 5);
        background:#171717;
      }
      &:hover {
        .top-b{
          border-color: #11CCB1;
        }
      }

      &:nth-child(5n) {
        // margin-right: 0px;
      }

      &.create-btn {
        border: 2px dashed #424242;
        border-radius: 16px;
        transition: 0.1s all linear;

        a {
          display: inline-block;
          width: 100%;
          height: 100%;
          text-align: center;

          .plus-icon {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background: #29272f;
            display: block;
            text-align: center;
            line-height: 40px;
            margin: 91px auto 18px auto;
          }

          .text {
            font-size: 14px;
            color: #fff;
            font-weight: 500;
          }
        }

        &:hover {
          border-color: #fff;
        }
      }

      .top-b {
        background: #171717;
        border-radius: 16px;
        height: 280px;
        border: 2px solid transparent;
        transition: .1s all linear;
        position: relative;
        overflow: hidden;
      }

      .img-flex-box {
        display: flex;
        align-items: center;
        position: relative;

        .lt-img {
          width: 204px;
          min-width:204px;
          max-width:204px;
          height: 210px;
          margin-right: 6px;
          border-radius: 16px;
          overflow: hidden;
          // border:1px solid red;
          background:#242327;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .rt-img {
          width:calc(100% - 204px - 6px);
          .next-img {
            width: 100%;
            height: 102px;
            margin-bottom: 6px;
            border-radius: 16px;
            overflow: hidden;
            background:#242327;
            // border:1px solid red;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .last-img {
            width: 100%;
            height: 102px;
            border-radius: 16px;
            overflow: hidden;
            background:#242327;
            // border:1px solid red;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .author {
          position: absolute;
          bottom: 10px;
          left: 9px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 12px;
          padding: 10px 13px;
          transition: 0.1s all linear;
          width: 164px;
          cursor: pointer;

          &:hover {
            background: rgba(255, 255, 255, 1);
          }

          .ar-tit {
            font-size: 14px;
            font-weight: 500;
            color: #383737;
            line-height: 20px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
            background-position: left center;
            padding-left: 22px;
          }

          .u-box {
            display: flex;
            padding-left: 20px;

            .name {
              font-size: 14px;
              color: #969696;
              font-weight: 500;
            }

            .avatar {
              width: 20px;
              height: 20px;
              border-radius: 20px;
              margin-right: 7px;
            }
          }
        }

        .at-btn {
          color: #fff;
          font-size: 14px;
          background-color: #11CCB1;
          border-radius: 12px;
          line-height: 44px;
          background-image: url('../../assets/pro/un_follow_ico.svg');
          background-repeat: no-repeat;
          background-position: 11px center;
          // width:82px;
          padding-left: 35px;
          padding-right: 19px;
          text-align: center;
          position: absolute;
          left: 10px;
          top: 10px;
        }

        .ated-btn {
          color: #383737;
          font-size: 14px;
          background-color: #fff;
          border-radius: 12px;
          line-height: 44px;
          background-image: url('../../assets/pro/cancel_follow_ico.svg');
          background-repeat: no-repeat;
          background-position: 11px center;
          // width:82px;
          padding-left: 35px;
          padding-right: 19px;
          text-align: center;
          position: absolute;
          left: 10px;
          top: 10px;
        }

        .edit-btn {
          color: #383737;
          font-size: 14px;
          background-color: #fff;
          border-radius: 12px;
          line-height: 44px;
          width: 40px;
          height: 40px;
          text-align: center;
          position: absolute;
          right: 10px;
          top: 10px;
          background-image: url('../../assets/pro/edit_ico.svg');
          background-repeat: no-repeat;
          background-position: center center;
        }

        .hid-el {
          // display: none;
          transition: 0.1s all linear;
          opacity: 0;
        }

        &:hover {
          .hid-el {
            // display: inline-block;
            opacity: 1;
          }
        }
      }

      .bot-desc {
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        // margin-top: 14px;
        // padding-top:14px;
        line-height: 22px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        align-items: center;
        background: #171717;
        margin-top: 10px;

        .file-name {
          color: #fff;
          font-weight: 500;
          padding-left: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }

        .file-num {
          color: #969696;
          margin-right: 13px;
          font-size: 14px;
          white-space: nowrap;
        }
      }

      .typename-box {
        padding-top: 6px;
        padding-left: 15px;
      }

      .type-name {
        line-height: 20px;
        font-size: 10px;
        padding: 0px 4px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        &:before {
            content: '';
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            height: 100%;
        }
        
        &.ftp_1 {
            color: #725959;

              &:before {
                  background: rgba(228, 36, 82, .14);
              }
          }

          &.ftp_0 {
              color: #726659;

              &:before {
                  background: rgba(#E49424, .14);
              }
          }

          &.ftp_2 {
              color: #4A5A4B;
              &:before {
                  opacity: 0.14;
                  background: rgba(54, 228, 36, 0.54);
              }
          }
        i {
          font-style: normal;
          position: relative;
          font-size: 10px;
          width: 100%;
          text-align: center;
        }
      }

      .followed-btn {
        background: #29272F;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
      }

      .follow-btn {
        background: #11CCB1;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
        transition: .2s all linear;

        &:hover {
          background:#ab2646;
        }

        &.active {
          background: #29272F;
            &:hover{
              background:#232129;
            }
        }
      }
    }
  }

  .video-layout-column {
    display: flex;
    flex-wrap: wrap;

    .video-d-item {
      width: 312px;
      height: 231px;
      margin-right: 20px;
      margin-bottom: 20px;

      .video-box {
        height: 175px;
        border-radius: 16px;
        overflow: hidden;
        position: relative;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }

        .play-icon {
          background: url('../../assets/pro/video_play_ico.svg') no-repeat;
          background-position: center center;
          background-size: 46px 46px;
          display: inline-block;
          width: 46px;
          height: 46px;
          position: absolute;
          left: calc((100% - 46px) / 2);
          top: calc((100% - 46px) / 2);
        }
      }

      &:nth-child(5n) {
        margin-right: 0px;
      }

      .followed-btn {
        background: #29272F;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
      }

      .followed-to {
        background: #11CCB1;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }

  .users {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .user-item {
      // margin-right: 20px;
      width: calc((100% - 80px) / 5);
      height: 382px;
      // background: #171717;
      border-radius: 16px;
      // text-align: center;
      padding-top: 40px;
      // margin-bottom: 20px;
      // transition: .1s all linear;
      animation: opacity .2s linear;
      border:2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;

      &:hover{
        border-color:#11CCB1;
      }

      .img-box {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        overflow: hidden;
        display: inline-block;
        margin-bottom: 20px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        display: block;
      }

      .nums {
        font-size: 14px;
        font-weight: 500;
        margin: 7px 0px 4px 0px;

        span {
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .addr {
        color: #969696;
        font-size: 14px;
        margin-bottom: 40px;
        line-height: 21px;
        height: 21px;
      }

      .stip {
        color: #969696;
        font-size: 14px;
        height:19px;
      }

      .followed-btn {
        background: #29272f;
        color: #fff;
        width: 200px;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 13px;
      }

      .follow-btn {
        background: #11CCB1;
        color: #fff;
        width: 200px;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 13px;
        user-select: none;
        transition: .2s all linear;

        &:hover {
          background:#ab2646;
        }

        &.active {
          background: #29272f;
            &:hover{
              background:#232129;
            }
        }
      }
    }
  }

  .fans-datas {
    .fans-item {
      height: 194px;
      border-radius: 16px;
      margin-bottom: 20px;
      // background: #181818;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 0px 0px 30px;
      animation: opacity .2s linear;

      .ldata {
        display: flex;
        align-items: center;
        
        .zwtop{
          min-height:88px;
        }
        .img-box {
          width: 80px;
          height: 80px;
          border-radius: 80px;
          margin-right: 29px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }

        .num-b {
          font-size: 14px;
          margin-top: 7px;
          font-weight: 600;

          span {
            &:first-child {
              margin-right: 10px;
            }
          }
        }

        .desc {
          margin-top: 6px;
          margin-bottom: 6px;
          color: #969696;
          font-size: 14px;
        }

        .time-desc {
          color: #969696;
        }

        .followed-btn {
          background: #29272f;
          color: #fff;
          width: 90px;
          line-height: 44px;
          border-radius: 8px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
        }

        .follow-btn {
          background: #11CCB1;
          color: #fff;
          width: 90px;
          line-height: 44px;
          border-radius: 8px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          margin-top: 10px;
          user-select: none;
          transition: .2s all linear;

          &:hover {
            background:#ab2646;
          }

          &.active {
            background: #29272f;
            &:hover{
              background:#232129;
            }
          }
        }
      }

      .rdata {
        display: flex;
        align-items: center;

        .works {
          img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 16px;
            margin-right: 10px;
          }
        }

        .opbtn {
          margin-left: 32px;
          font-size: 16px;
          user-select: none;

          .hx-attention {
            line-height: 44px;
            background: #29272f;
            border-radius: 8px;
            width: 90px;
            text-align: center;
            color: #fff;
            display: inline-block;
          }

          .attention-here {
            line-height: 44px;
            background: #11CCB1;
            border-radius: 8px;
            width: 90px;
            text-align: center;
            color: #fff;
            display: inline-block;
          }

          .remove {
            line-height: 44px;
            background: #29272f;
            border-radius: 8px;
            width: 90px;
            text-align: center;
            color: #fff;
            display: inline-block;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .basic-tit {
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    line-height: 37px;
    &.other{
      display: flex;
      margin:0 auto;
      width:max-content;
    }
    img{
      border-radius:20px;
      margin-right:10px;
    }
  }

  .basic-desc {
    font-size: 14px;
    color: #969696;
    text-align: center;
    margin: 10px 0px 31px 0px;
    line-height: 20px;
  }

  .op-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    .num {
      font-size: 14px;
      display: flex;
      align-items: center;

      i {
        color: #11CCB1;
        font-style: normal;
        margin-left: 5px;
      }
    }

    .main-tab {
      color: #969696;
      font-size: 18px;
      font-weight: 500;
      margin-left: 8px;
      user-select: none;

      a {
        margin-right: 30px;

        i {
          color: #5d5c5c;
          margin-left: 4px;
          font-style: normal;
          font-weight: normal;
        }

        &:last-child {
          margin-right: 0px;
        }

        &.cur {
          color: #fff;
          border-bottom: 2px solid #11CCB1;
          padding-bottom: 4px;
        }
      }
    }

    .layout-model {
      display: flex;
      align-items: center;
      background: #1c1c1e;
      padding: 12px 15px;
      border-radius: 8px;

      >a {
        width: 20px;
        height: 20px;
        display: inline-block;
      }

      .column {
        background: url('../../assets/pro/layout_column.svg') no-repeat;

        &.active {
          background: url('../../assets/pro/layout_column_active.svg') no-repeat;
        }
      }

      .list {
        margin-left: 9px;
        background: url('../../assets/pro/layout_list.svg') no-repeat;

        &.active {
          background: url('../../assets/pro/layout_list_active.svg') no-repeat;
        }
      }
    }
  }
}
</style>